<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div style="text-align: center;">
    <h4 class="muted">Employees on the floor</h4>

    <!-- Floor map - image -->

    <div id="floor_image" style="position: relative;">
        <img src="<%=request.getContextPath()%>/resources/${floorBean.imageFloor}" class="map"
             usemap="#floor_map" style="z-index:1;"/>

        <div id="base_info"
             style="position: absolute; z-index:0;display: none; height: 70; width: 70px;  border: 3px solid black;">
            <h6 id="base_info_name"></h6>
            <img id="base_info_image" src=""
                 style="height: 30; max-width: 50px;display: block;margin-left: auto; margin-right: auto;"/>
        </div>
    </div>

    <map name="floor_map">
        <c:forEach items="${floorBean.personList}" var="i">
            <area id="floor_map_${i.id}" href="<%=request.getContextPath()%>/person/${i.id}" shape="rect"
                  coords="${i.x1},${i.y1},${i.x2},${i.y2}"/>
        </c:forEach>
    </map>

</div>
<hr>

<footer>
    <p>&copy; Raskolduychiki 2013</p>
</footer>



<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/jquery/jquery.maphilight.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>



<script type="text/javascript">$(function () {
    $('.map').maphilight();
});
var personList = {
        <c:forEach items="${floorBean.personList}" var="i" >
${i.id}:
['${i.firstName}', '${i.lastName}', '${i.image}'],
</c:forEach>};

var currentPerson = null; // current person id

<c:forEach items="${floorBean.personList}" var="i" >
person_mouseover(${i.id});
</c:forEach>

function person_mouseover(personId) {
    var floor_map_id = "#floor_map_" + personId;
    $(floor_map_id).mouseover(function (e) {
        floor_map_show(personId);
    }).mouseout(function (e) {
                $('#base_info').css({display: 'none'});
                currentPerson = null;
            });
    $('#person_list_' + personId).click(function () {
        if (currentPerson == personId) {
            window.location = '<%=request.getContextPath()%>/person/' + personId;
        }
        $(floor_map_id).mouseover();
    });
}

function floor_map_show(personId) {
    var floor_map_id = "#floor_map_" + personId;
    if (currentPerson != personId) {
        $('#floor_map_' + currentPerson).mouseout();
        currentPerson = personId;
    }
    var coords = $(floor_map_id).attr('coords').split(',');
    var x = (parseFloat(coords[2]) - parseFloat(coords[0])) / 2 + parseFloat(coords[0]) - 70 / 2;
    var y = parseFloat(coords[1]);
    if (y < 40) {
        y = parseFloat(coords[3]);
    } else {
        y += 70;
    }
    console.log(x, y, personId);
    $('#base_info_name').text(personList[personId][0] + ' ' + personList[personId][1]);
    $('#base_info_image').attr("src", "<%=request.getContextPath()%>/resources/" + personList[personId][2]);
    $('#base_info').css({top: y, left: x, display: 'block'});
}


</script>